<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link href="layx/layx.css" rel="stylesheet" type="text/css"/>
    <script src="layx/layx.js" type="text/javascript"></script>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<#--<h1>{{msg}}</h1>-->
<#--<el-button type="success" round @click="fail">成功按钮</el-button>-->
    <el-button-group>
        <el-button type="primary" icon="el-icon-edit" @click="add">01</el-button>
        <el-button type="primary" icon="el-icon-share"></el-button>
        <el-button type="primary" icon="el-icon-delete"></el-button>
    </el-button-group>
    <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                fixed
                prop="date"
                label="日期"
                width="150">
        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
                width="120">
        </el-table-column>
        <el-table-column
                prop="province"
                label="省份"
                width="120">
        </el-table-column>
        <el-table-column
                prop="city"
                label="市区"
                width="120">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址"
                width="300">
        </el-table-column>
        <el-table-column
                prop="zip"
                label="邮编"
                width="120">
        </el-table-column>
        <el-table-column
        <#--fixed="right"-->
                label="操作"
                width="100">
            <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                <el-button type="text" size="small">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="block">
        <span class="demonstration">完整功能</span>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400">
        </el-pagination>
    </div>
</div>
<#noparse>
<script>
    //    layx.html('str','字符串文本','Hello Layx!');
    new Vue({
        el: "#app",
        mounted() {
//            console.log($)
//            console.info(layx);
        },
        created() {
            axios.post('userController.do?test', {
                firstName: 'Fred',
                lastName: 'Flintstone'
            }).then(function (response) {
                console.log(response);
            }).catch(function (error) {
                console.log(error);
            });
        },
        methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
            handleClick(row) {
                console.log(row);
            },
            fail() {
                this.msg = "fail";
            },
            add() {
                console.info(layx);
                layx.iframe('add', '百度官网', 'https://www.baidu.com');
                layx.max('add');//222
            },
        },
//        data:{
//            msg:"fff",
//            tableData:[{
//                date: '2016-05-02',
//                name: '王小虎',
//                province: '上海',
//                city: '普陀区',
//                address: '上海市普陀区金沙江路 1518 弄',
//                zip: 200333
//            }],
//        },
        data() {
            var tableDataItem = {
                date: '2016-05-02',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            };
            var tableData = [];
            for (var i = 0; i < 100; i++) {
                tableData.push(JSON.parse(JSON.stringify(tableDataItem)));
            }

            var msg = "你好";
            var json = {
                tableData, msg, currentPage1: 5,
                currentPage2: 5,
                currentPage3: 5,
                currentPage4: 4
            };
            return json;
        }
    });
</script>
</#noparse>

</body>
</html>